<template>
    <el-dialog
        :close-on-press-escape="closeOnPressEscape"
        :close-on-click-modal="closeOnClickModal"
        :destroy-on-close="destroyOnClose"
        :append-to-body="appendToBody"
        :width="width || (isMobile ? '92%' : '75%')"
        :title="title"
        v-bind="$attrs"
        v-on="$listeners"
        class="minWidth"
        :fullscreen="isFullscreen"
    >
        <el-button class="fullscreen-button">
            <i class="el-dialog__close el-icon el-icon-full-screen " @click="isFullscreen = !isFullscreen"></i>
        </el-button>
        <slot></slot>
        <template slot="footer">
            <slot name="footer"></slot>
        </template>
    </el-dialog>
</template>
<script>
export default {
    name: 'TheElDialog',
    props: {
        width: {
            type: String,
            default: '75%'
        },
        minWidth: {
            type: Boolean,
            default: false
        },
        fullscreen: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        closeOnPressEscape: {type: Boolean, default: true},
        closeOnClickModal: {type: Boolean, default: false},
        destroyOnClose: {type: Boolean, default: true},
        appendToBody: {type: Boolean, default: true}
    },
    data() {
        return {
            isFullscreen: false
        };
    },
    computed: {
        isMobile() {
            return this.$store.getters['app/isMobile'];
        }
    },
    created() {
        this.isFullscreen = this.fullscreen;
    },
    methods: {
        setFullscreen(isFullscreen) {
            this.isFullscreen = isFullscreen;
        }
    }
};
</script>
<style lang="scss">
.minWidth {
    .el-dialog {
        min-width: 600px;
    }
    .fullscreen-button {
        position: absolute;
        top: 22px;
        right: 44px;
        font-size: 14px;
        padding: 0;
        border: none;
        background-color: transparent;
    }
}
</style>
